<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直轮播</title>
	</head>
	<style>
		* {
		    margin: 0;
		    padding: 0;
		}
		
		body {
		    height: 100vh;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    background: linear-gradient(200deg, #fda09b, #918ef9);
		}
		
		.container {
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    position: relative;
		    width: 500px;
		    height: 300px;
		}
		
		.card {
		    width: 430px;
		    height: 100px;
		    background-color: #fff;
		    border-radius: 100px 20px 20px 100px;
		    position: absolute;
		    padding: 0 20px;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    opacity: 0;
		    animation: animate 10s linear infinite;
		    animation-delay: calc(2s * var(--d));
		}
		
		.container:hover .card {
		    animation-play-state: paused;
		}
		
		.card .img {
		    width: 90px;
		    height: 90px;
		    position: absolute;
		    left: 0;
		    top: 0;
		    background-color: #fff;
		    padding: 5px;
		    border-radius: 50%;
		    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
		}
		
		.card .img img {
		    width: 100%;
		    height: 100%;
		    object-fit: cover;
		    border-radius: 50%;
		}
		
		.card .content {
		    display: flex;
		    align-items: center;
		}
		
		.card .detail {
		    margin-left: 100px;
		}
		
		.card .detail span {
		    display: block;
		    font-size: 18px;
		    font-weight: 600;
		    margin-bottom: 8px;
		}
		
		.card a {
		    font-size: 14px;
		    text-decoration: none;
		    background: linear-gradient(to bottom, #fbc5ed, #a6c1ee);
		    padding: 7px 18px;
		    color: #fff;
		    border-radius: 25px;
		}
		
		@keyframes animate {
		    0% {
		        opacity: 0;
		        transform: translateY(100%) scale(0.5);
		    }
		
		    5%,
		    20% {
		        opacity: 0.4;
		        transform: translateY(100%) scale(0.7);
		    }
		
		    25%,
		    40% {
		        opacity: 1;
		        transform: translateY(0%) scale(1);
		    }
		
		    45%,
		    60% {
		        opacity: 0.4;
		        transform: translateY(-100%) scale(0.7);
		    }
		
		    65%,
		    100% {
		        opacity: 0;
		        transform: translateY(-100%) scale(0.5);
		    }
		}
		
		.register {
		    width: 400px;
		    height: 200px;
		    background-color: rgba(0, 0, 0, 0.65);
		    box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.5);
		    padding: 0 30px;
		    border-radius: 5px;
		    margin-left: 30px;
		}
		
		.register p {
		    color: #fff;
		    font-size: 24px;
		    line-height: 86px;
		    text-align: center;
		    height: 80px;
		    border-bottom: 1px solid #eee;
		}
		
		.register .btn {
		    height: 60px;
		    line-height: 60px;
		    font-size: 24px;
		    border-radius: 4px;
		    padding: 0 20px;
		    margin-top: 20px;
		    text-align: center;
		    color: #fff;
		    background: linear-gradient(-135deg, #856df1, #a468ef);
		    cursor: pointer;
		}
	</style>
	<body>
		<div class="container">
		    <div class="card" style="--d:-1;">
		        <div class="content">
		            <div class="img">
		                <img src="./images/1.jpg" alt="">
		            </div>
		            <div class="detail">
		                <span>王婉儿（Anna）</span>
		                <p>寻找真爱的微笑使者。</p>
		            </div>
		        </div>
		        <a href="#">关注</a>
		    </div>
		    <div class="card" style="--d:0;">
		        <div class="content">
		            <div class="img">
		                <img src="./images/2.jpg" alt="">
		            </div>
		            <div class="detail">
		                <span>李清雨（Lily）</span>
		                <p>用心灵构建美好的婚姻。</p>
		            </div>
		        </div>
		        <a href="#">关注</a>
		    </div>
		    <div class="card" style="--d:1;">
		        <div class="content">
		            <div class="img">
		                <img src="./images/3.jpg" alt="">
		            </div>
		            <div class="detail">
		                <span>张蓝心（Amy）</span>
		                <p>相信缘分，等待幸福的到来。</p>
		            </div>
		        </div>
		        <a href="#">关注</a>
		    </div>
		    <div class="card" style="--d:2;">
		        <div class="content">
		            <div class="img">
		                <img src="./images/4.jpg" alt="">
		            </div>
		            <div class="detail">
		                <span>赵梦婷（Freya）</span>
		                <p>热情洋溢，寻找属于我的爱情。</p>
		            </div>
		        </div>
		        <a href="#">关注</a>
		    </div>
		    <div class="card" style="--d:3;">
		        <div class="content">
		            <div class="img">
		                <img src="./images/5.jpg" alt="">
		            </div>
		            <div class="detail">
		                <span>陈思雪（Alice）</span>
		                <p>勇敢追求幸福，不断向前。</p>
		            </div>
		        </div>
		        <a href="#">关注</a>
		    </div>
		</div>
				
		<div class="register">
		    <p>60秒完成注册，幸福一辈子!</p>
		    <div class="btn">免费注册</div>
		</div>
	</body>
</html>